<template>
  <div class="edit-groups">
    <a-collapse v-model:activeKey="currentKey">
      <a-collapse-panel v-for="(item, index) in editGroups" :key="`item-${index}`" :header="item.text">
        <props-table :props="item.props" @change="handleChange"></props-table>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script lang="ts" setup>

import { type AllComponentProps } from 'lego-bricks'
import { difference } from 'lodash-es'
import { defineComponent, type PropType, computed, ref } from 'vue'
import PropsTable from './PropsTable.vue'
interface GroupProps {
  text: string;
  items: string[];
}
const defaultEditGroups: GroupProps[] = [
  {
    text: '尺寸',
    items: ['height', 'width', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
  },
  {
    text: '边框',
    items: ['borderStyle', 'borderColor', 'borderWidth', 'borderRadius']
  },
  {
    text: '阴影与透明度',
    items: ['opacity', 'boxShadow']
  },
  {
    text: '位置',
    items: ['left', 'top']
  },
  {
    text: '事件功能',
    items: ['actionType', 'url']
  }
]

defineOptions({
  name: 'EditGroup'
})

const props = defineProps({
  props: {
    type: Object as PropType<AllComponentProps>,
    required: true
  },
  groups: {
    type: Array as PropType<GroupProps[]>,
    default: defaultEditGroups
  }
})
const emit = defineEmits(['change'])

const currentKey = ref('item-0')
const newGroups = computed(() => {
  const allNormalProps = props.groups.reduce((prev, current) => {
    return [...prev, ...current.items]
  }, [] as string[])
  const specialProps = difference(Object.keys(props.props), allNormalProps)
  return [
    {
      text: '基本属性',
      items: specialProps
    },
    ...props.groups
  ]
})
const editGroups = computed(() => {
  return newGroups.value.map(group => {
    const propsMap = {} as AllComponentProps
    group.items.forEach(item => {
      const key = item as keyof AllComponentProps
      propsMap[key] = props.props[key]
    })
    return {
      ...group,
      props: propsMap
    }
  })
})
const handleChange = (e: any) => {
  emit('change', e)
}
</script>
